<template>
  <section class="section sec-3">
    <main>
      <div class="co-lr-part">
        <div class="left">
          <div class="co-title-balls"></div>
          <h1 class="co-title">成员介绍</h1>
          <div class="heads">
            <div class="head">
              <img src="/u1.svg" />
              <p class="name">Nikos Chen</p>
              <p class="desc">资深产品经理，<br />产品大叔一枚，最喜欢在产品相关流程中研究用户行为。</p>
            </div>
            <div class="head">
              <img src="/u2.svg" />
              <p class="name">Peiy Han</p>
              <p class="desc">高级UI视觉设计师，<br />除了负责造出超好看的H5、APP等视觉交互之外还负责可爱。</p>
            </div>
            <div class="head">
              <img src="/u3.svg" />
              <p class="name">Paul He</p>
              <p class="desc">资深前端工程师，<br />多平台全能打手，负责小程序、h5、pc、跨端等相关客户端开发。</p>
            </div>
            <div class="head">
              <img src="/u4.svg" />
              <p class="name">Berton Lei</p>
              <p class="desc">资深后端工程师，<br />沉默大叔负责后端及运维工作，平时比较闷骚。</p>
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>
    </main>
  </section>
</template>
<script>
export default {
  name: 'co-section-3',
};
</script>
<style lang="less" scoped>
.sec-3 {
  .heads {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;

    .head {
      width: 50%;
      box-sizing: border-box;
      padding: 0 20px 40px;
    }

    img {
      display: block;
      width: 120px;
      height: 120px;
      margin: 0 auto;
    }

    p {
      text-align: center;
      color: #fff;
    }

    .name {
      font-size: 16px;
      font-weight: bold;
      margin-top: 10px;
    }

    .desc {
      margin-top: 10px;
      line-height: 1.5;
      color: #9c9c9c;
      font-size: 14px;
    }
  }
}

// @media screen and (max-width: 1000px) {
//   .sec-3 {
//   }
// }
</style>
